<template>
  <div>
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div>
      <el-container class="container_box">
        <el-aside
            width="300px"
            class="physical_aside"
            style="background-color: #fff"
        >
          <!-- 左侧列表 -->
          <departments
              :list="departmentList"
              @getcatatlogue="getcatatlogue"
          ></departments>
        </el-aside>
        <el-main>
          <div class="header_top">
            <div>
              <el-form
                  :inline="true"
                  :model="searchForm"
                  class="demo-form-inline"
              >
                <el-form-item>
                  <el-input
                      v-model="searchForm.itemName"
                      placeholder="查找关键字"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="getList">查 找</el-button>
                </el-form-item>
                <el-form-item class="staff_form_btn">
                  <el-button type="primary" @click="dialogFormVisible=true">添加</el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-divider></el-divider>
          </div>
          <!-- 上级科目 -->
          <div>
            <el-table :data="tableData">
              <el-table-column type="index" label="序号" width="80">
              </el-table-column>
              <el-table-column prop="entryContent" label="诊断结论" width="300">
              </el-table-column>
              <el-table-column prop="errorInfo" label="病因解读" width="300">
              </el-table-column>
              <el-table-column prop="healthGuid" label="健康指导" width="300">
              </el-table-column>
              <el-table-column prop="sequence" label="显示排序" width="80">
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                      @click="handleClick(scope.row)"
                      type="primary"
                      size="small"
                  >编辑
                  </el-button>
                  <el-button
                      @click="remove(scope.row)"
                      type="danger"
                      size="small"
                  >删除
                  </el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNo"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
    <!-- 模态框 -->
    <!-- 体检套餐添加编辑 -->
    <el-dialog
        title="编辑诊断及建议"
        :visible.sync="dialogFormVisible"
        :append-to-body="true"
        width="50%"
        class="top_dialog"
    >
      <el-form :model="form" label-position="left" label-width="80px">
        <div class="add_info">
          <el-form-item label="项目名称" :label-width="formLabelWidth">
            <el-input v-model="this.navData.label" disabled></el-input>
          </el-form-item>
          <el-form-item label="诊断结论" :label-width="formLabelWidth">
            <el-input v-model="form.entryContent" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="诊断解读" :label-width="formLabelWidth">
            <el-input v-model="form.errorInfo" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="指导建议" :label-width="formLabelWidth">
            <el-input v-model="form.healthGuid" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input v-model="form.sequence"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editObj">保 存</el-button>
        <el-button @click="resetForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// import Vue from "vue";
import crumbs from "../../views/Crumbs.vue";
import departments from "../common/departments.vue";
// import addPages from "../common/basic/addPages.vue";
// import projectlist from "../common/basic/projectlist.vue";
import {formatTimeToStr} from "../../common/utils/date.js";

export default {
  components: {
    crumbs,
    departments,
    // addPages,
    // projectlist,
  },
  data() {
    return {
      id: null,
      dict: {},
      pageSize: 10,
      pageNo: 1,
      total: 0,
      navData:{},
      departmentList: [],
      form: {
        status: "",
      },
      itemform: {
        status: "",
      },
      lstExamItem: [],
      formLabelWidth: "80px",
      // 模态框
      // dialogFormVisible: false,
      dialogFormVisible: false,
      dialogFormcontent: false,

      tableData: [],
      searchForm: {},
      // lstExamItemContents: [],
      BreadCrumb: [
        {path: "", name: "基础数据",},
        {path: "", name: "诊断建议",},
      ],
    };
  },
  filters: {
    formatDate: function (time) {
      if (time != null && time !== "") {
        var date = new Date(time);
        return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
      } else {
        return "";
      }
    },
  },
  created() {
    // 部门列表获取
    this.getDepartmentList();
    // 列表刷新
    this.searchDictList();
  },
  mounted() {
  },
  methods: {
    searchDictList() {
      this.$axios.searchDictList({
        codes: ["xmType"],
      }).then((res) => {
        if (res.code === "00000") {
          res.data.forEach(v => {
            this.dict[v.dictCode] = v.items
          })
        }
      });
    },
    // 部门数结构请求
    getDepartmentList() {
      let that = this;
      this.$axios.getDepartItemTree({}).then((res) => {
        if (res.code == "00000") {
          that.departmentList = res.data;
        }
      });
    },

    // 根据id获取体检项目
    getcatatlogue(row) {
      this.navData = row;
      this.searchForm.itemId = row.id
      this.getList()
    },

    // 科室名称 列表刷新
    doGetList(req){
      this.$axios.queryResultPage(req).then((res) => {
        if (res.code == "00000") {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    getList() {
      this.doGetList(this.searchForm)
    },
    // 每页几条
    handleSizeChange(val) {
      this.pageSize = val
      const req = {
      	...this.searchForm,
				pageSize:this.pageSize,
				pageNo:this.pageNo,
      }
      this.doGetList(req)
    },
    // 第几页
    handleCurrentChange(val) {
      this.pageNo = val
      const req = {
      	...this.searchForm,
				pageSize:this.pageSize,
				pageNo:this.pageNo,
      }
      this.doGetList(req)
    },
    // 更改页面展开
    handleClick(row) {
      this.id = row.id
      this.dialogFormVisible = true;
      this.form = row
    },
    // 添加和更改
    editObj() {
      if (this.id != null) {
        this.$axios
            .updateResult({
              id: this.id,
              ...this.form,
              examItemId: this.navData.id,
              deptId: this.navData.parentId,
            })
            .then((res) => {
              if (res.code == "00000") {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.resetForm()
                this.getList();
              }
            });
      } else {
        this.$axios
            .insertResult({
              ...this.form,
              examItemId: this.navData.id,
              deptId: this.navData.parentId,
            })
            .then((res) => {
              if (res.code == "00000") {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.resetForm()
                this.getList();
              }
            });
      }
    },

    resetForm(){
      this.dialogFormVisible= false
      this.form={}
      this.id=null
    },

    // 删除体检项目
    remove(e) {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
            .delResult({
              id: e.id,
            })
            .then((res) => {
              if (res.code == "00000") {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.getList();
              }
            });
      });
    },
  },
};
</script>

<style scoped>
.main_box_title {
  background: #fff;
  padding: 10px;
}

.aside_box_title {
  margin: 0px 8px 10px;
  /* text-align: center; */
}

.header_top .el-divider--horizontal {
  margin-top: 0px;
}

.el-main {
  padding: 0px;
  padding-left: 20px;
}

.staff_form_btn {
  margin-left: 20px;
}

/* .physical_aside {
		margin-top: 40px;
	} */

.box_list_box {
  flex: 1;
  margin-top: 20px;
  background-color: #fff;
}

.box_list_box .h1 {
  margin-left: 2%;
}

.el_tab {
  margin-top: 20px;
}

.add_info {
  /* display: flex; */
  padding: 0px 30px;
}

.info_l {
  text-align: left;

  /* flex: 1; */
}

.info_r {
  width: 60%;
  text-align: left;
  flex: 1;
  margin-left: 30px;
}

.info_sel {
  display: flex;
}

.info_sel_r {
  margin-left: 20px;
}

.top_dialog /deep/ .el-dialog__body {
  padding: 0px !important;
}

.block {
  text-align: center;
  margin-top: 10px;
  /* margin:0px auto; */
}

.dialog_flex {
  display: flex;
}

.dialog_flex_r {
  margin-left: 20px;
}

.info_sel_r_group {
  margin-left: 10px;
}

.top_dialog /deep/ .el-dialog {
  margin-top: 5vh !important;
}

.el-aside {
  height: 85vh;
}
</style>
